<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/validate.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css" rel="stylesheet">
    <link href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="/js/bootstrap-clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet">
</head>
<body>

<div class="container-fluid p-t-10">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header"><h4>操作日志管理</h4></div>
                <div class="card-body">
                            <h6>账号：admin，密码：admin</h6>
                            <a class=" .position-relative" href="/druid">点击进入Druid监控平台</a>
                    <table id="tb_ad"></table>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>


<!--表格插件-->
<!--<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>-->
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>


<script type="text/javascript">
    $('#tb_ad').bootstrapTable({
        classes: 'table table-bordered table-hover table-striped ',
        url: '/loglist/query',
        method: 'post',
        contentType: "application/json",
        //contentType : "application/x-www-form-urlencoded",
        dataType : 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
        uniqueId: 'id',
        idField: 'id',             // 每行的唯一标识字段
        toolbar: '#toolbar',       // 工具按钮容器
        showColumns: true,         // 是否显示所有的列
        showRefresh: true,         // 是否显示刷新按钮
        //search:true,               //是否显示表格搜索
        // showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
        pagination: true,
        sortName:"create_time",
        sortOrder: "desc",                    // 排序方式
            queryParams: function(params) {
            //传递到后端为json格式,用map接收，使用@Requestbody注解
            var temp = {

            };
            return temp;
        },                                   // 传递参数
        sidePagination: "client",            // 分页方式：client客户端分页，server服务端分页
        pageNumber: 1,                       // 初始化加载第一页，默认第一页
        pageSize: 5,                        // 每页的记录行数
        pageList: [5,10, 25, 50, 100],         // 可供选择的每页的行数
        //search: true,                      // 是否显示表格搜索，此搜索是客户端搜索

        //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
        //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

        columns: [{
            checkbox: true   // 是否显示复选框
        },{
            field: 'username',
            title: '操作用户名',
            sortable: true
        }, {
            field: 'operation',
            title: '用户操作',
            sortable:true
        },{
            field: 'time',
            title: '响应时间',
            sortable:true
        },{
            field: 'ip',
            title: 'ip地址',
            sortable:true
        }, {
            field: 'create_time',
            title: '用户操作时间',
            sortable: true
        },{
            field: 'params',
            title: '参数',
            sortable:true,
            width:20000
        },{
            field: 'method',
            title: '方法',
            sortable:true
        },],
        onLoadSuccess: function(data){
            $("[data-toggle='tooltip']").tooltip();
        }
    });




    //筛选查询
    function query() {

            $('#tb_ad').bootstrapTable('refresh');


    }
</script>



</body>
</html>
